import React, { memo } from 'react';
import { shallowEqual, useSelector } from 'react-redux';
import { AlbumSongWrapper } from './style';
import {formatDuration} from '@/utils/format'
import usePlayMusic from '@/hooks/usePlayMusic'
import useShowDetail from '@/hooks/useShowDetail'

export default memo(function AlbumSong() {
  const { albumSongs,albumDetail } = useSelector(state => ({
    albumSongs: state.getIn(['album', 'albumSongs']),
    albumDetail:state.getIn(['album','albumDetail'])
  }), shallowEqual)
  const playMusic = usePlayMusic()
  const goToSongDetail = useShowDetail()
  const tracks = albumSongs || []
  return (
    <AlbumSongWrapper>
      <div className="nav">
        <span className='title'>包含歌曲列表</span>
        <span className='size'>{albumDetail?.size}首歌</span>
      </div>
      <div className="list">
      <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">歌曲标题</th>
              <th className="duration">时长</th>
              <th className="singer ">歌手</th>
            </tr>
          </thead>
          <tbody>
            {
              tracks.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td>
                      <div className="rank-num">
                        <span className="num">{index + 1}</span>
                        <span className="play sprite_table" onClick={e => playMusic(item.id)}></span>
                      </div>
                    </td>
                    <td>
                      <div className="song-name">
                        <span className="name" onClick={e => goToSongDetail(item.id)} href=''>{item.name}</span>
                      </div>
                    </td>
                    <td className='dt'>
                      <div className="dt_content">{formatDuration(item.dt)}</div>
                      <div className="operate">
                        <button className="btn sprite_02 play" onClick={e => playMusic(item.id)}></button>
                        <button className="btn sprite_icon2 addto"></button>
                        <button className="btn sprite_02 favor"></button>
                      </div>
                    </td>
                    <td className='text-nowrap'>
                      {
                        item.ar.map((ar,indey) => {
                          return (
                            <span key={indey}>{ar.name}/</span>
                          )
                        })
                      }
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </AlbumSongWrapper>
  )
});
